<template>
  <div class="pinglunguanli">
    <div class="shang">
      <div class="tab">
        <div class="item shoushou" @click="tab(1)">
          文章
          <div v-if="type==1" class="xian"></div>
        </div>
        <div class="item shoushou" @click="tab(2)">
          视频
          <div v-if="type==2" class="xian"></div>
        </div>
        <div class="item shoushou" @click="tab(3)">
          问答
          <div v-if="type==3" class="xian"></div>
        </div>
      </div>

      <div class="timeselect">
        <div class="timeleft" style="margin-right:13px;">
          <div class="timeitem shoushou" :class="[select_t==0?'timeitem_s':'']" @click="selecttime(0)">全部</div>
          <div class="timeitem shoushou" :class="[select_t==1?'timeitem_s':'']" @click="selecttime(1)">最新</div>
        </div>
      </div>
    </div>
    <div class="itemmbox">
      <div class="itemm" v-for="(item,index) in list" :key="index" >
        <div class="item-left">
          <div class="item-left-left">
            <img :src="item.avatar" alt />
          </div>
          <div class="item-left-right">
            <div class="item-left-right-title">
              {{item.nickname}}
              <span>{{item.created_at}}</span>
            </div>
            <div style="font-size:16px;">{{item.content}}</div>
            <div class="left-right-box">
              <div class="num-item shoushou" v-if="item.is_like==0" @click="zan(index)">
                <img src="../assets/pinglun/p2.png" alt />
                <div class="num">赞</div>
                <div class="shuxian"></div>
              </div>

              <div class="num-item" v-if="item.is_like==1">
                <img src="../assets/pinglun/p2s.png" alt />
                <div class="num" style="color:#266AFF;" >已赞</div>
                <div class="shuxian"></div>
              </div>

              <!-- <div class="num-item">
                <img src="../assets/pinglun/p3.png" alt />
                <div class="num">评论</div>
                <div class="shuxian"></div>
              </div>

              <div class="num-item">
                <img src="../assets/pinglun/p4.png" alt />
                <div class="num">删除</div>
                <div class="shuxian"></div>
              </div>-->

              <div class="num-item shoushou" v-if="item.report==0" @click="jubao(index)">
                <img src="../assets/pinglun/p5.png" alt />
                <div class="num">举报</div>
              </div>
              <div class="num-item" v-if="item.report==1">
                <img src="../assets/pinglun/p5s.png" alt />
                <div class="num"  style="color:#266AFF;" >已举报</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-right" v-if="item.cover[0]!='' && item.cover.length!=0">
          <img :src="item.cover[0]" alt />
        </div>
      </div>

      <img class="juzhong" v-if="list.length==0" src="../assets/tixian/t5.png" alt="">
    </div>

    <tc :tcdata="tcdata" @tuichutc="tuichutc" @queding="queding" v-if="tcdata.show"></tc>
  </div>
</template>



<script>
import tc from "./tc.vue";
export default {
  components: {
    tc: tc
  },
  data() {
    return {
      // key: value
      type: 1,
      select_t: 0,
      list: "",

      caozuoindex: "",
      tcdata: {
        show: false,
        isdel: true,
        icon: 0,
        type: "提交",
        title: "提交成功"
      }
    };
  },
  mounted() {
    if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }
    this.getpinglinlist();
  },
  methods: {
    tuichutc(data) {
      this.tcdata.show = false;
    },
    queding(data) {
      // console.log(data);
      this.tcdata.show = false;
      this.z_jubao();
    },

    jubao(index) {
      this.caozuoindex = index;

      this.tcdata = {
        show: true,
        isdel: true, //anniu
        icon: 2,
        type: "举报",
        title: "你确定举报这条评论吗？ "
      };
    },
    z_jubao() {
      this.$axios({
        method: "post",
        url: "media/descs/comment_report",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          cid: this.list[this.caozuoindex].id
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$message({
            showClose: true,
            message: '已举报',
            type: "success"
          });
          this.getpinglinlist()
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },
    zan(index) {
      // media/descs/comment_like

      this.$axios({
        method: "post",
        url: "media/descs/comment_like",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          cid: this.list[index].id
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
         this.getpinglinlist()
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    tab(index) {
      this.type = index;
       if(index==1){
        this.$store.state.mianbaoxie=['乐讯号','评论管理','文章']
      }

      if(index==2){
        this.$store.state.mianbaoxie=['乐讯号','评论管理','视频']
      }
       if(index==3){
        this.$store.state.mianbaoxie=['乐讯号','评论管理','问答']
      }

      this.getpinglinlist();
    },
    selecttime(index) {
      this.select_t = index;
      this.getpinglinlist();
    },

    getpinglinlist() {
      this.$get(
        // method: "get",
        "media/descs/comment_list",
        {
          uqid: localStorage.getItem("uqid"),
          type: this.type,
          status: this.select_t,
          page: 1,
          limit: 100
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          this.list = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style  scoped>
.item-right{
  width:200px;
  height:110px;
  position: relative;
}

.item-right img{
  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    -o-object-fit: contain;
    object-fit: contain;
    background: #eee;
}
.timeitem_s {
  color: #266aff;
}
.shuxian {
  width: 1px;
  height: 8px;
  background: rgba(229, 229, 229, 1);
  margin: 0 6px;
}

.num-item {
  display: flex;
  align-items: center;
}
.num-item img {
  height: 12px;
  margin-right: 4px;
}
.left-right-box {
  height: 17px;
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(92, 92, 92, 1);
}
.item-left-right-title {
  font-size: 20px;
  font-weight: 550;
  line-height: 28px;
  color: rgba(48, 49, 51, 1);
}
.item-left-right-title span {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(172, 172, 172, 1);
}
.item-left-left {
  width: 60px;
  height: 60px;
  /* background: rgba(0, 0, 0, 1); */
  border-radius: 50%;
  opacity: 1;
  overflow: hidden;
  margin-right: 32px;
}
.item-left {
  display: flex;
  align-items: center;
}
.itemm {
  height: 150px;
  width: 100%;
  border-bottom: 1px solid rgba(231, 237, 252, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.itemmbox {
  width: 100%;
  height: calc(100% - 128px);
  overflow: hidden;
  overflow-y: scroll;
  padding: 0 19px;
  box-sizing: border-box;
  position: relative;
}
.juzhong{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.itemmbox::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.pinglunguanli::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.pinglunguanli {
  width: 100%;
  height: calc(100% - 118px);
  overflow-y: scroll;
  overflow-x: hidden;

  background: rgba(255, 255, 255, 1);
}

.shang {
  width: 100%;
  /* height: 128px; */
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  padding: 20px 19px 0;
  box-sizing: border-box;
}
.tab {
  display: flex;
}
.xian {
  width: 34px;
  height: 3px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  position: absolute;
  bottom: -8px;
}
.item {
  margin-right: 47px;
  position: relative;
  font-size: 16px;
  font-weight: 550;
}

.timeselect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0 19px; */
  margin-top: 32px;
}
.hengtcj {
  margin: 0 8px;
}
.timeleft,
.timeright {
  display: flex;
  align-items: center;
}

.timeright {
}

.timezi {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  margin-right: 13px;
}
.timeitem {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-right: 13px;
}
</style>